//  放大镜
(function () {
    var zoomBox = document.querySelector('#zoomBox'); //放大镜外层元素
    var smallImageBox = zoomBox.querySelector('.small-image') //小图包裹元素
    var largeImageBox = zoomBox.querySelector('.large-image') //大图包裹元素
    var maskBox = zoomBox.querySelector('.mask-box'); //半透明层
    // 鼠标进入小图的事件
    smallImageBox.onmouseenter = function () {
        // 蒙层显示
        maskBox.style.display = 'block';
        //大图显示
        largeImageBox.style.display = 'block';
    }
    //监听鼠标移动事件
    smallImageBox.onmousemove = function (event) {
        // h获取元素在小图上的位置=鼠标在视口上的位置-小图元素在视口上的位置
        var left = event.clientX - smallImageBox.getBoundingClientRect().left;
        var top = event.clientY - smallImageBox.getBoundingClientRect().top;
        // 使鼠标在蒙层的中点，需要减去蒙层宽、高的一半。
        left -= maskBox.offsetWidth / 2;
        top -= maskBox.offsetHeight / 2;

        // 限制蒙层的位置
        if (left < 0) {
            left = 0;
        } else if (left > smallImageBox.clientWidth - maskBox.offsetWidth) {
            left = smallImageBox.clientWidth - maskBox.offsetWidth;

        }
        if (top < 0) {
            top = 0;
        } else if (top > smallImageBox.clientHeight - maskBox.offsetHeight) {
            top = smallImageBox.clientHeight - maskBox.offsetHeight;
        }

        //    调整蒙层的位置
        maskBox.style.left = left + 'px';
        maskBox.style.top = top + 'px';
        //调整大图的位置
        largeImageBox.scrollLeft = left * 2;
        largeImageBox.scrollTop = top * 2;

    }
    //监听鼠标离开的事件
    smallImageBox.onmouseleave = function () {
        // 蒙层不显示
        maskBox.style.display = 'none';
        //大图不显示
        largeImageBox.style.display = 'none';
    }

})();
// 缩略图
(function () {
    var prevBtn = document.querySelector('.thumb-box .thumb-prev');
    var nextBtn = document.querySelector('.thumb-box .thumb-next');
    var thumbWrapper = document.querySelector('.thumb-box .thumb-wrapper');
    var smallImage = document.querySelector('#zoomBox .small-image img') //小图包裹元素
    var largeImage = document.querySelector('#zoomBox .large-image  img') //大图包裹元素
    // 根据数组创建缩略图元素
    goodData.imgsrc.forEach(
        function (imgItem, index) {
            var imgBox = new Image();
            imgBox.src = imgItem.s;
            // 给每个元素自定义一个index属性，方便后面的切换大小图
            imgBox.dataset.index = index;
            thumbWrapper.appendChild(imgBox);

        }
    );
    //    计算单个图片所占的所占的位置：自己的宽度+右边距
    var imgMoveWith = thumbWrapper.firstElementChild.offsetWidth + parseInt(getStyle(thumbWrapper.firstElementChild, 'marginRight'));
    //    记录上一次点击按钮触发的时间
    prevBtn.startTime = 0;
    //    点击上一个按钮
    prevBtn.onclick = function (event) {
        if (event.timeStamp - prevBtn.startTime <= 400) {

            return;
        }
        // 更新触发时间
        prevBtn.startTime = event.timeStamp;
        var left = thumbWrapper.offsetLeft + imgMoveWith * 2;
        if (left > 0) {
            left = 0;
        }
        thumbWrapper.style.left = left + 'px';

    };
    //    记录点击下一次按钮触发的事件
    nextBtn.startTime = 0;
    //    点击下一个按钮
    nextBtn.onclick = function (event) {
        if (event.timeStamp - nextBtn.startTime <= 400) {

            return;
        }
        // 更新触发时间
        nextBtn.startTime = event.timeStamp;
        var left = thumbWrapper.offsetLeft - imgMoveWith * 2;
        //    判断有效位置
        if (left < imgMoveWith * 5 - thumbWrapper.offsetWidth) {
            left = imgMoveWith * 5 - thumbWrapper.offsetWidth;
        }

        thumbWrapper.style.left = left + 'px';
    };
    // 通过委托事件给每个图片添加监听事件
    thumbWrapper.onclick = function (event) {
        if (event.target.nodeName === 'IMG') {

            smallImage.src = goodData.imgsrc[event.target.dataset.index].s;
            largeImage.src = goodData.imgsrc[event.target.dataset.index].b;
        }
    }

})();
// 侧边栏选项卡
(function () {
    var tabNavItems = document.querySelectorAll('#siderbarTab .tab-nav .tab-nav-item');
    var tabPanelItems = document.querySelectorAll('#siderbarTab .tab-panel .tab-panel-item');
    tab(tabNavItems, tabPanelItems);
})();
// 商品介绍
(function () {
    // 调用函数实现选项卡
    tab(document.querySelectorAll('#introTab .tab-nav .tab-nav-item'), document.querySelectorAll('#introTab .tab-panel .tab-panel-item'));
})();
// 商品参数选项 购买数量 搭配商品
(function () {
        /*
        1. 商品参数选项对应价格变化
           1.1 根据参数选项的数据动态创建元素  dl dt dd
           1.2 dd 元素监听单击事件，点击选中，同组内排他
           1.3 点击 dd 元素，创建选中标签； 按照顺序；同组选项互相替换。
           1.4 点击选中标签的删除按钮，本身删除，对应的dd取消选中，且再选中所在组的第一个
           1.5 点击dd元素和选中标签元素，都会修改价格显示； 根据selectedArr数组中的选项进行价格计算
        2. 购买数量对应价格变化
           2.1 点击加减按钮数量变化，最小数量是1
           2.2 手动修改输入框中的数量，最小数量是1
           2.3 数量改变，价格变化
        3. 搭配商品 
           3.1 给每个搭配商品监听事件，如果选中将价格加入到总价上 如果取消选中从总价中减掉 
    */
    // 获取选项的包裹元素
    var optionsBox = document.querySelector('#optionsBox');
    // 获取选中标签的包裹元素
    var selectedBox=document.querySelector('#selectedBox');
    // 获取显示价格的元素
    var priceBox=document.querySelector('#priceBox');
    // 数量输入框
    var numInput=document.querySelector('#numInput');
    // 数量加按钮
    var plusBtn=document.querySelector('#plusBtn');
    // 数量减按钮
    var minusBtn=document.querySelector('#minusBtn');
    // 获取显示主商品价格的元素
    var masterPriceBox=document.querySelector('#masterPrice');
    // 获取显示搭配商品数量的元素
    var totalNumBox=document.querySelector('#totalNumBox');
    // 显示总价（主商品+搭配商品）的元素
    var totalPrice=document.querySelector('#totalPrice');
    // 显示所有搭配商品的复选框
    var collectionInputs=document.querySelectorAll('#chooseProducts input');


    // 创建一个装被选中元素的数组
    var selectedArr=new Array(goodData.goodsDetail.crumbData.length);
    // 创建一个全局主商品数量变量
    var productNum=1;
    // 记录搭配商品数量
    var collectionNum=0;
    // 记录搭配商品的总价
    var collectionPrice=0;

    goodData.goodsDetail.crumbData.forEach(
        function (dlItem, dlIndex) {
            // 创建dl元素
            var dlELe = document.createElement('dl');
            // 添加到选项的包裹元素
            optionsBox.appendChild(dlELe);
            // 创建dt元素
            var dtEle = document.createElement('dt');
            dtEle.innerHTML = dlItem.title;
            // 添加到dl元素
            dlELe.appendChild(dtEle);
            // 遍历每个选项数据，创建dd元素
            dlItem.data.forEach(
                function (ddItem, ddIndex) {
                    var ddEle = document.createElement('dd');
                    ddEle.innerHTML = ddItem.type;
                    dlELe.appendChild(ddEle);
                     // 给dd增加一个自定义属性，用于记录选项数组的索引
                    ddEle.dataset.groupIndex=dlIndex;
                    // 自定义一个属性，记录各个dd元素的价格
                    ddEle.dataset.changePrice=ddItem.changePrice;
                    // 如果是该选项组中的第一个元素，默认选中
                    if(ddIndex===0){
                        ddEle.classList.add('active');
                    }

                }
            );

        }
    );

    //通过父元素 optionsBox委托给dd元素添加监听事件，并排他
    optionsBox.onclick = function (event) {
        if (event.target.nodeName === 'DD') {
            var siblingEles = event.target.parentElement.children;
            //    同一组中排他
            for (var i = 1; i < siblingEles.length; i++) {
                siblingEles[i].classList.remove('active');
            }
            // 将选中的目标元素添加active
            event.target.classList.add('active');
            // 将选中的元素添加到selectedArr数组里面
            selectedArr[event.target.dataset.groupIndex]=event.target; 
           //调用创建类为selected-tag标签的函数，
            createSelectedTag();
            //调用计算商品价格的函数
            changePrice();
        }

    };
    // 通过selectedBox元素事件委托，给选中标签的关闭按钮设置监听事件
    selectedBox.onclick=function(event){
        // 判断点击的是关闭按钮
        if(event.target.className==='close'){
            // 删除选中标签
            selectedBox.removeChild(event.target.parentElement);
            var  ddEle=selectedArr[event.target.parentElement.dataset.index];
            // 同时取消所选元素的active类名
            ddEle.classList.remove('active')
            //同时将选中的选中的dl的第一个dd元素改为默认元素
            ddEle.parentElement.children[1].classList.add('active');

             // 数组中删除选中的元素
            delete selectedArr[event.target.parentElement.dataset.index];
            // 调用商品计算函数
            changePrice();
        
        }
    };
    // 给加按钮，添加事件
    plusBtn.onclick=function(){
      productNum++;
      numInput.value=productNum;
    //   调用价格函数，改变价格
      changePrice();
    };
    // 给减按钮，添加事件
    minusBtn.onclick=function(){
        if(productNum<=1){
            productNum=1;
        }else{
            productNum --;
        }
          numInput.value=productNum;
          //   调用价格函数，改变价格
         changePrice();
    };
    // 给输入框，添加改变事件
    numInput.onchange=function(){
        // 获取输入框的值
        productNum=+numInput.value;
        if(isNaN(productNum)|| productNum<1){
            productNum=1;
        }
        // 修改输入框的值
        numInput.value=productNum;
        // 调用函数计算主商品的总价并显示
        changePrice();
    };
    // 给每个搭配商品的复选框设置监听事件change
    collectionInputs.forEach(function(collectionInput){
        collectionInput.onchange=function(){
            if(collectionInput.checked){
                // 计算搭配商品的价格
                collectionPrice+=(+collectionInput.value);
                // 计算搭配商品的数量
                collectionNum++;
            }else{
                  // 计算搭配商品的价格
                collectionPrice -=(+collectionInput.value);
                // 计算搭配商品的数量
                collectionNum--;
            }
            // 修改价格显示
            changePrice();
            // 显示配套商品的数量
            totalNumBox.innerHTML=collectionNum;
        }

    });
    /**
     * 定义函数：根据数组元素selectArr，创建selected-tag标签
     */
    function createSelectedTag(){
        // 在添加元素之前，将前期的元素去掉
        selectedBox.innerHTML='';
        // 用foreach()函数遍历selectArr,另外foreach()可以去掉数组为空的元素
        selectedArr.forEach(function(ddEle,index){
            var selectedEle=document.createElement('div');
            selectedEle.className='selected-tag';
            selectedEle.innerHTML=ddEle.innerHTML+'<span class="close">&times;</span>';
            selectedEle.dataset.index=index;
            selectedBox.appendChild(selectedEle);

        })
        
    };
    // 定义函数：计算商品的价格
    function changePrice(){
        // 获取基础价格
        var price=goodData.goodsDetail.price;
        // 根据selectedArr中选中的元素计算价格
        selectedArr.forEach(
            function(ddEle){
                price+=(+ddEle.dataset.changePrice);

            }
        );
        // 计算主商品的总价
        var masterPrice=price * productNum;
        // 修改显示的价格
        priceBox.innerHTML=masterPrice;
        // 修改搭配选项中主商品的价格
         masterPriceBox.innerHTML='&yen;'+masterPrice;
        //  计算套餐价
        totalPrice.innerHTML='&yen;' +(masterPrice+collectionPrice);
       
    }

})();
// 固定侧边栏导航
(function(){
    // 获取元素
    var pageSidebar=document.querySelector('#pageSidebar');//固定侧边栏
    var menuBtn=document.querySelector('#menuBtn');// 关闭或者开启按钮
    var topBtn=document.querySelector('#topBtn') //返回顶部按钮

    //点击菜单栏按钮
    menuBtn.onclick=function(){
        pageSidebar.classList.toggle('open');
    };
    // 点击返回顶部
  topBtn.onclick=function(){
    window.scrollTo({
        top: 0,
        behavior:"smooth"
    });
  }
})()

